﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8">
		<title>Test Case 18: Input Controls in Nested Repetition Blocks &laquo; Web Forms 2.0 Test Suite</title>
		<meta name="author" content="Weston Ruter">
		<meta name="description" content="">
		<script type="text/javascript" src="../webforms2-p.js"></script>
		<link rel="stylesheet" type="text/css" href="testcase.css"><!-- ISSUE: When this stylesheet is placed here after the script tag, MSIE sometimes cannot initialize Repetition Model before onload -->
		<!-- prev --><link rel="prev" href="017.html"><!-- /prev -->
		<!-- next --><link rel="next" href="019.html"><!-- /next -->
		<link rel="home" href="index.html">
		
		<script type="text/javascript">
		
		</script>
		<style type="text/css">
		
		</style>
		
	</head>
	<body>
		<div id="testSuiteNote">

			<h1>Web Forms 2.0 Test Case 18: Input Controls in Nested Repetition Blocks</h1>
			<p class="purpose">
			This test case demonstrates functionality of the Web Forms 2.0 specification and tests the compliance of 
			this cross-browser <a href="http://code.google.com/p/webforms2/">Web Forms 2.0 implementation</a>.</p>

			 <p>Testing various types of input controls in nested repetition blocks.</p> 
			
			<div class="testSuiteNavigation">
				<!-- prev -->&larr;&nbsp;<a href="017.html" class="prev">Form validation</a> |<!-- /prev -->
				<a href="index.html" class="index">Test Suite Index</a>
				<!-- next -->| <a href="019.html" class="next">Prefilling form data</a>&nbsp;&rarr;<!-- /next -->
			</div>
			
			<hr>
		</div>
  

  <form>
   <h1> Solar system </h1>
   <p> <label> System Name: <input name="name"/> </label> </p>
   <h2> Planets </h2>
   <ol>
    <li repeat="template" repeat-start="1" id="planets">
     <label for="planet[planets].name">Planet name: </label>
	 <select name="planet[planets].name" id="planet[planets].name">
		<option value="1">Mercury</option>
		<option value="2">Venus</option>
		<option value="3" selected>Earth</option>
		<option value="4">Mars</option>
		<option value="5">Jupiter</option>
		<option value="6">Saturn</option>
		<option value="7">Neptune</option>
		<option value="8">Uranus</option>
		<optgroup label="Dwarf Planets">
			<option>Ceres</option>
			<option>Pluto</option>
			<option>Eris</option>
		</optgroup>
	 </select>
	 
	 <label>Nickname: <input name="planet[planets].nickname" required="required"/> </label><br>
	   Class:
			<label><input name="planet[planets].class" type="radio" value="M"> N </label>
			<label><input name="planet[planets].class" type="radio" value="N" checked> M </label><br>
		
			<label><input name="planet[planets].isPopulated" type="checkbox" checked> Is populated?</label><br>
			<label for="planet[planets].starships">Spaceship home:</label><br>
			<select name="planet[planets].starships" id="planet[planets].starships" multiple size="6">
			   <option value="1" selected>Space Shuttle</option>
			   <option value="2">Apollo</option>
			   <option value="3" selected>Sputnik</option>
			   <option value="4">Mercury</option>
			   <optgroup label="Lost or nearly lost">
				  <option>Apollo 1</option>
			      <option selected>Apollo 13</option>
			   </optgroup>
			   <option value="5">Space Ship One</option>
			   <option value="6" selected>Virgin Galactic</option>
			   <option value="7">Boeing 797 Spaceliner</option>
			</select><br>
	
		<fieldset>
		   <legend>Moons</legend>
		   <ul>
			<li repeat="template" repeat-start="0" id="planet[planets].moons">
			 <input name="planet[planets].moon[planet[planets].moons]"/>
			 Class:
				 <label><input name="planet[planets].moon[planet[planets].moons].class" type="radio" value="M" checked> N </label>
				 <label><input name="planet[planets].moon[planet[planets].moons].class" type="radio" value="N"> M </label>
				 <label><input name="planet[planets].inhabited" type="checkbox" checked> inhabited </label>
			 <button type="remove">Delete Moon</button>
			</li>
		   </ul>
		   <p><button type="add" template="planet[planets].moons">Add Moon</button></p>
		</fieldset>
		<p><button type="remove">Delete Planet</button></p>
    </li>
   </ol>
   <p><button type="add" template="planets">Add Planet</button></p>
   <p><button type="submit">Submit</button></p>
  </form>
		

		<hr>
		<a href="http://code.google.com/p/webforms2/">Web Forms 2.0 implementation</a><br>
		Version: 0.5.2 (2007-11-29) <a href="http://code.google.com/p/webforms2/wiki/Changelog">changelog</a>
		<address>
		<a href="http://weston.ruter.net/">Weston Ruter</a>
		</address>
	</body>
</html>